/*
 * @Description:
 * @Author: Rfan
 * @Date: 2022-04-06 16:26:36
 * @LastEditTime: 2022-05-25 09:01:00
 */

import React, { useEffect } from 'react';
import { Button, Col, Form, Input, Row, Select, Tag } from 'antd';
import classNames from 'classnames/bind';
import { useAddRuleContext } from '../contexts/AddRuleContext';

import styles from '../../../../styles/addRuleDialog.module.scss';

const cx = classNames.bind(styles);

const { Option } = Select;

type ICondition = {
  type: number;
  field?: string;
  operator?: string;
  operand?: string;
  name?: string;
};

const ConditionWrap = () => {
  const {
    leftCol = 20,
    fieldList = [],
    conditionList = [],
    addConditionItem
  } = useAddRuleContext();

  const [form] = Form.useForm();

  // fieldList有变化时重置表单
  useEffect(() => {
    form.resetFields();
  }, [fieldList]);

  /**
   * 增加条件项目
   */
  const addCondition = () => {
    console.log('submit', form);
    form.submit();
  };
  const onFinish: (values: ICondition) => void = (values: ICondition) => {
    console.log('form finish', values);
    values.field = `【${values.field}】`;
    values.type = 0;
    addConditionItem(values);
    form.resetFields();
  };

  /**
   * 增加逻辑操作符
   */
  const addLogic: (str: string) => void = (str: string) => {
    switch (str) {
      case 'AND':
        addConditionItem({ type: 1, name: '与', value: str });
        break;

      case 'OR':
        addConditionItem({ type: 1, name: '或', value: str });
        break;

      case 'NOT':
        addConditionItem({ type: 1, name: '非', value: str });
        break;

      default:
        break;
    }
  };

  return (
    <div>
      <Row gutter={20}>
        <Col span={leftCol}>
          <Form layout="horizontal" form={form} onFinish={onFinish}>
            <Row gutter={20}>
              <Col span={8}>
                <Form.Item name="field">
                  <Select placeholder="请选择字段/著录项">
                    {fieldList.map((item: any) => (
                      <Option key={item.id} value={item.field_desc}>
                        {item.field_desc}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="operator">
                  <Select>
                    <Option value=">">大于</Option>
                    <Option value="=">等于</Option>
                    <Option value="<">小于</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="operand">
                  <Input allowClear />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Col>
        <Col className={cx('query--add')} span={24 - leftCol}>
          <Button type="primary" block onClick={() => addCondition()}>
            添加
          </Button>
        </Col>
      </Row>
      <Row className={cx('condition-row')} gutter={20}>
        <Col className="" span={leftCol}>
          <div className={cx('condition-wrapper')}>
            <div className={cx('condition-list')}>
              {conditionList.map((item: any, idx: number) => {
                return item.type === 0 ? (
                  <div key={item.field + item.operator} className={cx('condition-item')}>
                    {item.field} {item.operator} {item.operand}
                  </div>
                ) : (
                  <div key={item.name + idx} className={cx('condition-item')}>
                    <Tag color="processing">{item.name}</Tag>
                  </div>
                );
              })}
            </div>
          </div>
        </Col>
        <Col className={cx('condition-row--btn')} span={24 - leftCol}>
          <Button block onClick={() => addLogic('AND')}>
            与
          </Button>
          <Button block onClick={() => addLogic('OR')}>
            或
          </Button>
          <Button block onClick={() => addLogic('NOT')}>
            非
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default ConditionWrap;
